<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>匹配日期</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<script src="./../js/index.js"></script>
	<style>
		body {
			font-size: 1rem;
		}

		/* td {
            text-align: center;
        } */
	</style>
</head>

<body>
	<div id="app" class="container-xl">




		<br>
		<div class="container-xl">
			<h4>匹配日期结果:</h4>
			<div @click="copyText()">
				<textarea class="form-control" rows="12" id='msg' placeholder="" v-model='msg' readonly>


			</textarea>
			</div>
			<span id="cp2" style="font-size: 30px;color: #f20d0d;">复制成功！</span>

			<br>

			<div class="container-xl">
				<div class="row">
					<div class="col-sm-6">
						<textarea class="form-control " rows="16" v-model="inputMsg1" placeholder="粘贴车牌"></textarea>
					</div>
					<div class="col-sm-6">
						<textarea class="form-control col-sm-6" rows="16" v-model="inputMsg2"
							placeholder="粘贴车牌和日期"></textarea>
					</div>
				</div>
			</div>

			

		</div>

	</div>
	<script src="./../js/vue.js"></script>
	<script>

		const app = new Vue({
			el: '#app',
			data: {
				msg: '',
				inputInfo: '',
				inputMsg1:'',
				inputMsg2:''
			},
			created() {
				// 设置定时器定时更新
				this.timer = setInterval(() => {

					this.handleData();
					this.msg = this.msg.trim();
				}, 500);

				var cp2 = document.getElementById("cp2"); //
				cp2.style.display = "none";
			},

			beforeDestroy() {
				// 清除定时器以避免内存泄漏
				clearInterval(this.timer);
			},
			methods: {



				copyText() {

					var select = document.getElementById("msg")
					select.select(); //选中textarea中的内容
					try {
						var successful = document.execCommand('copy'); //执行复制命令
						if (successful) {
							console.log('成功复制！');
							if (select.value != '') {
								var cp2 = document.getElementById("cp2"); //
								cp2.style.display = "block";
							}



						} else {
							console.log('无法复制！');
						}
					} catch (err) {
						console.error('无法复制！', err);
					}


				},

				handleData(){
					this.inputMsg1 = this.inputMsg1.trim()
					this.inputMsg2 = this.inputMsg2.trim()

					if (this.inputMsg1 == '') {

						return
					}

					if (this.inputMsg2 == '') {

						return
					}


					var strArray1 = this.inputMsg1.split('\n')
					var strArray2 = this.inputMsg2.split('\n')

				

					for (var i = 0; i < strArray1.length; i++) {

						this.msg = this.msg + strArray1[i]
 
						for (var j = 0; j < strArray2.length; j++) {

							if(strArray2[j].indexOf(strArray1[i]) != -1){
								var temp = strArray2[j].split('\t')

								var msgArray = this.msg.split('\n')
								if (msgArray[msgArray.length - 1].indexOf('\t') != -1){
									this.msg = this.msg +'，'+temp[1]
								}else {
									this.msg = this.msg +'\t'+temp[1]
								}
								

							}
						
						}
						this.msg =this.msg +'\n'

					}

					this.inputMsg1 = ''
					this.inputMsg2 = ''


				}
			}

		})



	</script>
	<script src="../js/bootstrap.bundle.min.js"></script>
</body>

</html>